import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
import { observer, inject } from 'mobx-react';
import User from '../../stores/user_store'

import MyComments from './my_comments/index';
import MyArticle from './my_article/index';
import MyInfo from './my_info/index';
import Breadcrumbs from '../../components/breadcrumbs/index';

import './index.scss';

@inject((stores) => {
  const store = {
    user: stores.user,
  }
  return store
})
@observer
class UserCenterContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeIndex: 0,
    }
    this.changeTableCard = this.changeTableCard.bind(this)
  }
  componentWillMount() {
    this.checkUser()
  }
  checkUser() {
    if (!this.props.user.userInfo.user_id) {
      this.props.history.push(`/user/login/${encodeURIComponent(this.props.match.url)}`)
    }
  }
  // 点击改变table card
  changeTableCard(index) {
    this.setState({
      activeIndex: index,
    })
  }
  render() {
    const list = ['我的文章', '我的评论', '我的信息'];
    const { userInfo } = this.props.user
    const componentList = [
      <MyArticle userInfo={userInfo} perPage={10} />,
      <MyComments userInfo={userInfo} perPage={10} />,
      <MyInfo userInfo={userInfo} />,
    ]
    return (
      <div id="user-center-container">
        <div className="w">
          <div className="container">
            <Breadcrumbs currentTitle="个人中心" />
            <div className="table">
              <ul className="table-title">
                {list.map((item, index) => (
                  <li
                    className={this.state.activeIndex === index ? 'active' : ''}
                    key={item}
                    onClick={() => { this.changeTableCard(index) }}
                  >
                    {item}
                  </li>
                ))
                }
              </ul>
              <ul className="table-content">
                {componentList.map((item, index) => (
                  <li
                    className={this.state.activeIndex === index ? 'active' : ''}
                    key={item.type.name}
                  >
                    {item}
                  </li>
                ))
                }
              </ul>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
export default withRouter(UserCenterContainer);
UserCenterContainer.propTypes = {
  user: PropTypes.instanceOf(User),
  history: PropTypes.objectOf(Object),
  match: PropTypes.objectOf(Object),
}
